<template>
    <div class="panel-tab__content">
      <div class="element-property input-property">
        <div class="element-property__label">异步延续：</div>
        <div class="element-property__value">
          <el-checkbox v-model="asynchronous" @change="updateDocumentation('asynchronous')">异步</el-checkbox>
        </div>
      </div>
      <div class="element-property input-property">
        <div class="element-property__label">实例名称：</div>
        <div class="element-property__value">
          <el-input
            v-model="instanceName"
            size="mini"
            resize="vertical"
            :autosize="{ minRows: 2, maxRows: 4 }"
            @input="updateDocumentation('instanceName')"
            @blur="updateDocumentation('instanceName')"
          />
        </div>
      </div>
      <div class="element-property input-property">
        <div class="element-property__label">被调流程：</div>
        <div class="element-property__value">
          <el-select v-model="calledElement" size="mini" filterable clearable placeholder="请选择" @change="onCalledElementChanged">
            <el-option
              v-for="item in processList"
              :key="item.processKey"
              :label="item.processName"
              :value="item.processKey">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="element-property input-property">
        <div class="element-property__label">异步延续：</div>
        <div class="element-property__value">
          <el-checkbox v-model="inherit" @change="updateDocumentation('inherit')">继承</el-checkbox>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import convert from "xml-js";
  import { listProcess } from "@/api/workflow/process";

  export default {
    name: "ElementStructure",
    props: {
      id: String,
      bpmnModeler: Object,
    },
    data() {
      return {
        asynchronous:"",
        instanceName:"",
        calledElement:"",
        inherit:"",
        processList: [],
        parseData:"",
      };
    },
    watch: {
      id: {
        immediate: true,
        handler: function(id) {
          if (id && id.length) {
            this.$nextTick(() => {
              this.bpmnElement = window.bpmnInstances.bpmnElement
              let dataObj = null
              this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
                let JSONDATA = convert.xml2json(xml, { spaces: 2 })
                this.parseData = JSON.parse(JSONDATA).elements[0].elements;
                this.parseData.forEach((parseRes)=>{
                  parseRes.elements.forEach((parseResSon)=>{
                    if(parseResSon.name.indexOf('callActivity') !=  -1){
                      if(parseResSon.attributes.id == id){
                        console.log('attributes',parseResSon.attributes)
                        dataObj = parseResSon.attributes
                        if(dataObj){
                          this.asynchronous = dataObj['flowable:async'] ? true : dataObj['flowable:exclusive'];
                          this.instanceName = dataObj['flowable:processInstanceName'];
                          this.calledElement = dataObj.calledElement;
                          this.inherit = dataObj['flowable:inheritVariables'] == 'false' ? false : (dataObj['flowable:inheritVariables'] == 'true' ? true : null);
                          console.log("this.inherit",this.inherit)
                        }
                      }
                    }
                  })
                })
              });
            });
          } else {
            this.asynchronous = "";
            this.instanceName = "";
            this.calledElement = "";
            this.inherit = "";
          }
        }
      }
    },
    created() {
      this.getList()
    },
    beforeDestroy() {
      this.bpmnElement = null;
    },
    methods: {
      updateDocumentation(name) {
        (this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
        if(name == 'asynchronous'){
          if(this.asynchronous){
            window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
              "flowable:async": this.asynchronous,
              "flowable:exclusive": undefined
            });
          }else{
            window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
              "flowable:async": this.asynchronous,
              "flowable:exclusive": undefined
            });
          }
        }else if(name == 'instanceName'){
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            "flowable:processInstanceName": this.instanceName
          });
        }else if(name == 'calledElement'){
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            'calledElement':this.calledElement
          });
        }else if(name == 'inherit'){
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            "flowable:inheritVariables": this.inherit
          });
        }
      },
      onCalledElementChanged(val) {
        this.updateDocumentation('calledElement')
      },
      /** 查询流程定义列表 */
      getList() {
        let queryParams = {
          pageNum: 1,
          pageSize: 10000,
          processKey: undefined,
          processName: undefined,
          category: undefined
        }
        listProcess(queryParams).then(response => {
          this.processList = response.rows;
        })
      }
    }
  };
  </script>
  